<template>、
  <a-card title="走马灯">
    <div class="container w-1080px">
      <!-- arrow="never" -->
      <el-carousel ref="cardShowRef"
                   :autoplay="false"
                   class="sss">
        <el-carousel-item v-for="item in Math.ceil(swiper_data.length / 2)"
                          :key="item">
          <div class="swiper_switchover">
            <div class="swiper_Item"
                 v-for="(item, index) in getPageData(item)"
                 :key="index">
              <!-- 卡片数据内容-->
              <div class="period_Title">{{ item.title }}</div>
              <div><el-rate v-model="item.star"
                         disabled /></div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </a-card>
</template>
<script setup>
const swiper_data = ref([
  {
    id: '1',
    title: '2021402143期',
    star: 3,
    period: '21',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },

  {
    id: '2',
    title: '2021402144期',
    star: 4,
    period: '22',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '3',
    title: '2021402145期',
    star: 5,
    period: '23',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '4',
    title: '2021402146期',
    star: 4,
    period: '24',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,

    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },
  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  },

  {
    id: '5',
    title: '2021402147期',
    star: 3,
    period: '25',
    time: '2023.02.02-2023.02.03',
    stu: '26',
    teacher: ['王老师', '赵老师']
  }
])

const cardShowRef = ref()

const getPageData = pageIndex => {
  console.log(pageIndex)

  const startIndex = (pageIndex - 1) * 2
  const endIndex = pageIndex * 2
  console.log(startIndex, endIndex)

  return swiper_data.value.slice(startIndex, endIndex)
}

const arrowClick = val => {
  if (val === 'right') {
    cardShowRef.value.next()
  } else {
    cardShowRef.value.prev()
  }
}
</script>
<style scoped>
.container {
  position: relative;

  .leftArrow {
    position: absolute;
    top: 50%;
    left: 50px;
    width: 60px;
    height: 20px;
    background-color: azure;
    cursor: pointer;
  }

  .rightArrow {
    position: absolute;
    top: 50%;
    right: 50px;
    width: 60px;
    height: 20px;
    background-color: azure;
    cursor: pointer;
  }
}

.swiper_switchover {
  display: flex;
  margin: 50px 70px;

  .swiper_Item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 264px;
    height: 214px;
    background: rgb(0, 0, 0, 0.02);
    border-radius: 11px;
    margin-right: 24px;
    padding: 22px;
    box-sizing: border-box;

    .period_Title {
      font-weight: bold;
      font-size: 20px;
      color: rgb(0, 0, 0, 0.7);
    }

    .describe {
      font-weight: 400;
      font-size: 13px;
      color: rgb(0, 0, 0, 0.7);
    }
  }

  .swiper_Item:last-child {
    margin-right: 0;
  }
}

:deep(.el-carousel__arrow) {
  background: rgba(36, 196, 211, 0.1);
}

:deep(.el-carousel__arrow .el-icon) {
  color: #24c4d3;
  font-size: 16px;
  font-weight: bold;
}
</style>
